<!--
 * @Author: cl
 * @Description: 云和下雪
 * @Date: 2023-06-02 08:34:34
 * @LastEditTime: 2023-07-28 09:21:12
 * @FilePath: \jsnode\css\snow.html
 * @LastEditors: chenli chenli@kcwl.com
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script setup>
      let data = []
      for(let i=0;i<200;i++){
        data.push(Math.random()*40)
      }
      console.log(data);
    </script>
  </head>
  <body>
    <div class="div1">
      <div class="div2">
      </div>
      <div v-for="item in data">
        <div class="snow" :style="--test: item" ></div>
      </div>
      
      <div class="snow" style="--i: 6,--j:6"></div>
      <div class="snow" style="--i: 12,--j:6"></div>
      <div class="snow" style="--i: 34,--j:6"></div>
      <div class="snow" style="--i: 16,--j:6"></div>
      <div class="snow" style="--i: 13,--j:6"></div>
      <div class="snow" style="--i: 5,--j:6"></div>
      <div class="snow" style="--i: 13,--j:6"></div>
      <div class="snow" style="--i: 19,--j:6"></div>
      <div class="snow" style="--i: 11,--j:6"></div>
      <div class="snow" style="--i: 13,--j:6"></div>
      <div class="snow" style="--i: 14,--j:6"></div>
      <div class="snow" style="--i: 15.3,--j:6"></div>
      <div class="snow" style="--i: 13,--j:6"></div>
      <div class="snow" style="--i: 26,--j:6"></div>
      <div class="snow" style="--i: 13,--j:6"></div>
      <div class="snow" style="--i: 18"></div>
      <div class="snow" style="--i: 20"></div>
      <div class="snow" style="--i: 12"></div>
      <div class="snow" style="--i: 18"></div>
      <div class="snow" style="--i: 15"></div>
      <div class="snow" style="--i: 19"></div>
      <div class="snow" style="--i: 23"></div>
      <div class="snow" style="--i: 21"></div>
      <div class="snow" style="--i: 15"></div>
      <div class="snow" style="--i: 16"></div>
      <div class="snow" style="--i: 13"></div>
      <div class="snow" style="--i: 14"></div>
      <div class="snow" style="--i: 17"></div>
      <div class="snow" style="--i: 13"></div>
      <div class="snow" style="--i: 21"></div>
      <div class="snow" style="--i: 20"></div>
      <div class="snow" style="--i: 18"></div>
    </div>
    <style>
      body {
        background-color: rgb(55, 157, 224);
      }
      .div1 {
        width: 175px;
        height: 50px;
        border-radius: 25px;
        background-color: white;
        margin-top: 200px;
      }
      .div2 {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: white;
        box-shadow: 50px 0px 0px 25px white;
        left: 25px;
        top: -25px;
        position: relative;
      }
      .snow {
        /* animation: snowdown 4s infinite; */
        background-color: white;
        width: calc(30px / var(--i));
        height: calc(30px / var(--i));
        border-radius: calc(30px / var(--i)/2);

        animation-name: snowdown;
        animation-duration: calc(30s / var(--i));
        /* animation-delay: ; */
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
        animation-fill-mode: backwards;
        animation-delay: calc( 100 /var(--j));
        display: inline-block;
      }
      @keyframes snowdown {
        0% {
          /* transform: translateY(0px); */
          transform: translateY(-10px) scale(1);
        }
        70% {
          transform: translateY(150px) scale(0);
        }
        100% {
          transform: translateY(150px) scale(0);
          /* transform: translateY(100px); */
        }
      }
    </style>
  </body>
</html>
